<template>
  <el-form class="resetPasswordForm" autocomplete="off" ref="form" :model="form" :rules="rules">
    <el-form-item prop="password">
      <el-input :disabled="!!password" autocomplete="new-password" v-model="form.password" placeholder="请输入原密码" :show-password="!password"></el-input>
    </el-form-item>
    <el-form-item prop="newPassword">
      <el-input autocomplete="new-password" v-model="form.newPassword" placeholder="请输入新密码" show-password></el-input>
    </el-form-item>
    <el-form-item prop="repeatNewPassword">
      <el-input autocomplete="new-password" v-model="form.repeatNewPassword" placeholder="请确认新密码" show-password></el-input>
    </el-form-item>
    <el-button class="login-btn" type="primary" @click="ensure">确认</el-button>
  </el-form>
</template>

<script>
export default {
  name: "resetPasswordForm",
  props: {
    password: String
  },
  data(){
    return{
      form:{
        password: '',
        newPassword: '',
        repeatNewPassword: ''
      },
      rules: {
        password: [
          {required: true, message: '请输入原密码', trigger: 'blur'},
        ],
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
        ],
        repeatNewPassword: [
          {required: true, message: '请确认新密码', trigger: 'blur'},
          {
            validator: (rule, val, cbk) => {
              if(val === this.form.newPassword) cbk();
              else cbk(new Error('输入与新密码不符'));
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods:{
    ensure(){
      this.$refs['form'].validate(valid => {
        if(valid){
          this.$yAxios({
            url: this.$api.system.updatePassword,
            data:{
              oldPassword: this.form.password,
              newPassword: this.form.newPassword
            },
            loading: true
          }, info => {
            info && this.$emit('change-success')
          })
        }
      })
    }
  },
  watch:{
    'password':{
      handler(val){
        this.form.password = val;
      },
      immediate: true
    }
  }
}
</script>

<style scoped lang="less">
.resetPasswordForm{
  /deep/.el-form-item{
    margin: 30px 0;
    &.is-error{
      .el-input >input{
        border-color: #F56C6C;
      }
    }
  }
  &:not(.login-page){
    /deep/.el-form-item{
      .el-input >input{
        border: none;
        border-bottom: 1px solid #DCDFE6;
        border-radius: unset;
      }
    }
  }
  >.el-button{
    width: 80%;
    height: 50px;
    background: @common-color;
    box-shadow: 0 4px 16px 0 #B3C0E7;
    border-radius: 27px;
    padding: 0;
    margin-top: 30px;
  }
}
</style>